<template>
  <div class="address-box">
    <s-header :name="'商品管理'"></s-header>

    <div v-for="(good, index) in goodList" :key="index" class="order-item-box">
      <van-card
          :key="good.goodId"
          :num="good.stock"
          :price="good.sellingPrice"
          :origin-price="good.markedPrice"
          :desc="good.introduction"
          :title="good.name"
          :thumb="good.pictures"
      >
        <template #footer>
          <van-button @click="onEditActivity(good.goodId)">修改活动</van-button>
          <van-button @click="onEdit(good.goodId)">修改</van-button>
          <van-button @click="onDelete(good.goodId)">删除</van-button>
        </template>
      </van-card>
    </div>

    <van-action-bar>
      <van-action-bar-button type="danger" text="新增商品" @click="onAdd"/>
    </van-action-bar>
  </div>

</template>

<script>
import {reactive, toRefs, onMounted} from 'vue'
import sHeader from '@/components/SimpleHeader'
import {DeleteGood, getGoods} from '@/service/good'
import {useRouter} from 'vue-router'
import {DeleteAddress} from "@/service/user";
import {Toast} from "vant";

export default {
  components: {
    sHeader
  },
  setup() {
    const router = useRouter()
    const state = reactive({
      goodList: []
    })

    onMounted(async () => {
      const {data} = await getGoods()
      state.goodList = data

    })

    const onAdd = () => {
      router.push({path: '/good-edit'})
    }

    const onEdit = (goodId) => {
      console.log(goodId)
      router.push({path: '/good-edit', query: {type: 'edit', goodId: goodId}})
    }

    const onEditActivity = (goodId) => {
      router.push({path: '/activity-edit', query: {goodId: goodId}})
    }

    const onDelete = async (goodId) => {
      await DeleteGood({"goodId": goodId})
      Toast('删除成功')
      setTimeout(() => {
        router.back()
      }, 1000)
    }

    return {
      ...toRefs(state),
      onAdd,
      onEdit,
      onDelete,
      onEditActivity
    }
  }
}
</script>

<style lang="less">
@import '../../../common/style/mixin';

.address-box {
  .van-radio__icon {
    display: none;
  }

  .address-item {
    .van-button {
      background: @primary;
      border-color: @primary;
    }
  }
}
</style>
